<template>
  <div>
    <!-- 选择优惠券 -->
    <u-popup v-model="localShow"
             mode="bottom"
             border-radius="30"
             height="950rpx"
             @open="getCouponList"
             @close="cloneCouponPopup">
      <div style="display: flex;justify-content: space-between;padding: 30rpx;">
        <div class="u-title">优惠券</div>
        <!--        <div style="font-size: 24rpx;color: #c6c7c7;line-height: 44rpx;">使用说明</div>-->
      </div>
      <div class="u-pt-10">
        <scroll-view
            scroll-y="true"
            style="height: 650rpx;"
            @scrolltolower="loadMore">
          <div class="tab-item-list-pink">
            <u-radio-group @change="radioGroupChange" v-model="selectedIndex" active-color="#e55e97">
              <u-radio v-for="(item, index) in couponList" :key="index" :name="item.id">
                <div class="aui-flex">
                  <div class="aui-left-change">
                    <h2 class="font-baseline">
                      <em>￥</em>
                      <span>{{ formatAmount(item.couponAmount) }}</span>
                    </h2>
                    <p v-if="item.useThresholds">满{{ item.useThresholds }}元可用</p>
                    <p v-else>无门槛</p>
                    <div class="aui-icon-circle"></div>
                  </div>
                  <div class="aui-flex-box aui-flex-box-two">
                    <h3>
                      <span class="u-fz-14">{{ item.useScope == 'ALL' ? '玫丽生活购物通用券' : '玫丽生活购物单品券' }}</span>
                    </h3>
                    <div class="aui-flex aui-flex-bor-bom">
                      <div class="aui-flex-box aui-flex-box-flow">有效期至{{ formatTime(item.validateTime) }}</div>
                    </div>
                    <div class="aui-flex aui-flex-show">
                      <span class="u-fz-12">{{ formatDesc(item) }}</span>
                    </div>
                  </div>
                  <!--                  <div v-show="selectedIndex === index" class="checkmark"></div>-->
                </div>
              </u-radio>
            </u-radio-group>
          </div>
          <div class="u-border-top" v-if="couponList.length < 1">
            <div class="u-text-center" style="padding-top: 40%;">
              <u-empty text="没有优惠券" mode="coupon"></u-empty>
            </div>
          </div>
          <div style="position: fixed;bottom: 0rpx;background-color: #fffbfe;width: 100%;z-index: 3;">
            <div class="u-pt-10 u-pb-30" style="width: 90%;margin: 0 auto;height: 100px;">
              <div style="margin-top: 10px;">
                <u-button type="primary" shape="circle" @click="selectedCoupon"
                          :custom-style="{background:'#e55e97',color:'#fff'}">
                  确定
                </u-button>
              </div>
            </div>
          </div>
        </scroll-view>
      </div>
    </u-popup>
  </div>
</template>

<script>
export default {
  name: "CouponSelect",
  props: {
    show: false,
    goodsId: '',
    useScope: '',
    // 是否需要初始化
    init: false
  },
  watch: {
    show(newVal) {
      // 当父组件的 show prop 改变时，更新本地的数据属性 localShow
      this.localShow = newVal;
    },
  },
  data() {
    return {
      localShow: false,
      pageNum: 1,
      pageSize: 5,
      total: 0,
      selectedIndex: null,
      offerAmount: 0,
      selectedList: [],
      couponList: []
    }
  },
  mounted() {
    if (this.init) {
      this.defaultSelection();
    }
  },
  methods: {
    loadMore() {
      if (this.pageNum * this.pageSize > this.total) {
        return;
      }
      this.pageNum += 1;
      this.getCouponList();
    },
    // 获取优惠卷列表
    async getCouponList() {
      const userInfo = uni.getStorageSync('userInfo')
      let params = {
        userId: userInfo.userId,
        batchId: this.goodsId,
        useScope: this.useScope,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        status: "0",
      }
      let token = await this.getToken(params);
      let tmpToken = this.sault_md5_token(token);
      params.systemid = "payment";
      params.token = token;
      params.authStr = tmpToken;
      params.url = "/coupon/user/list";
      let result = await this.$u.api.unifyMiniRest(params);
      if (result.code == 200) {
        this.total = result.total;
        if (this.pageNum != 1) {
          this.couponList = this.couponList.concat(result.rows);
        } else {
          this.couponList = result.rows;
        }
      }
    },
    radioGroupChange(e) {
      let flag = false;
      if (this.selectedIndex === this.selectedList[0]?.id) {
        this.selectedIndex = null;
        flag = true;
      }
      this.selectedList = [];
      this.offerAmount = 0;
      if (flag) {
        return;
      }
      for (let i in this.couponList) {
        if (this.couponList[i].id === e) {
          this.selectedIndex = e;
          this.selectedList.push(this.couponList[i])
          this.offerAmount = parseFloat(this.couponList[i].couponAmount)
        }
      }
    },
    // 选中优惠券 可以多选
    selectedCoupon() {
      this.$emit('selected-event', this.selectedList, Number(this.offerAmount).toFixed(2));
      this.cloneCouponPopup();
    },
    // 默认初始化方法
    async defaultSelection() {
      if (!this.isNotNull(this.goodsId) && !this.isNotNull(this.useScope)) {
        // 这两个值没有初始化不能选择
        return;
      }
      await this.getCouponList();
      this.radioGroupChange(this.couponList[0]?.id)
      this.selectedCoupon();
    },
    // 关闭弹窗
    cloneCouponPopup() {
      this.$emit('update:show', false);
    },
    async getToken(params) {
      params.systemid = "payment";
      params.url = "/points/token";
      let result = await this.$u.api.unifyMiniRest(params);
      let token = "";
      if (result.code == 200) {
        token = result.data
      }
      return token;
    },
    formatTime(dateString) {
      let date = new Date(dateString);
      return date.toISOString().split("T")[0];
    },
    formatAmount(amount) {
      if (!this.isNotNull(amount)) {
        return '';
      }
      let prefixAmount = amount.split(".")[0]
      let suffixAmount = amount.split(".")[1]
      if (suffixAmount == '00') {
        return prefixAmount
      } else {
        return amount
      }
    },
    /**
     * 隐藏文字 使用...代替
     */
    hideStr(str, num) {
      if (this.isNotNull(str)) {
        if (str.length > num) {
          return str.substring(0, num) + '...';
        } else {
          return str;
        }
      } else {
        return '';
      }
    },
    formatDesc(item) {
      let desc = ''
      if (item.useScope == 'ALL') {
        desc = '全部商品可用'
      } else {
        if (item.couponName?.length > 10) {
          desc = item.couponName.substring(0, 10) + '...可用'
        } else {
          desc = this.couponName + '可用'
        }
      }
      return desc
    },
  }
}
</script>

<style scoped>
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: #000;
}

a, label, button, input, select {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

img {
  border: 0;
}

body {
  background: #fff;
  color: #666;
}

html, body, div, dl, dt, dd, ol, ul, li, h1, h2, h3, h4, h5, h6, p, blockquote, pre, button, fieldset, form, input, legend, textarea, th, td {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: #08acee;
}

button {
  outline: 0;
}

img {
  border: 0;
}

button, input, optgroup, select, textarea {
  margin: 0;
  font: inherit;
  color: inherit;
  outline: none;
}

li {
  list-style: none;
}

a {
  color: #666;
}

.clearfix::after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}

.aui-flex {
  width: 650rpx;
  padding: 20rpx 10rpx 0rpx 20rpx;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  position: relative;
}

.aui-flex-box {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  min-width: 0;
  font-size: 24rpx;
  color: #333;
  /* padding: 12rpx 0; */
}

.tab-nav-item a {
  display: inherit;
  font-size: 28rpx;
  color: #474245;
}

.tab-panel {
  position: relative;
  overflow: hidden;
  margin: 4rpx 0;
}

.tab-panel .tab-panel-item {
  width: 100%;
  position: absolute;
  top: 0;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}


.tab-panel .tab-panel-item.tab-active ~ .tab-panel-item {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.tab-panel .tab-panel-item.tab-active {
  position: relative;
  -webkit-transition: -webkit-transform .15s;
  transition: -webkit-transform .15s;
  transition: transform .15s, -webkit-transform .15s;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}


.aui-left-change {
  background-image: -webkit-gradient(linear, left top, right top, from(#529be8), to(#6175e0));
  background-image: -webkit-linear-gradient(left, #529be8, #6175e0);
  background-image: -moz-linear-gradient(left, #529be8, #6175e0);
  background-image: linear-gradient(to right, #529be8, #6175e0);
  background-color: #6175e0;
  text-align: center;
  color: #fff;
  padding: 24rpx 0rpx;
  height: 100px;
  width: 38%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.aui-left-change h2 {
  font-size: 60rpx;
  display: flex;
}

.aui-left-change h2 em {
  font-style: normal;
  font-weight: normal;
  font-size: 40rpx;
}

.aui-flex-box h3 {
  font-size: 24rpx;
  width: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  word-break: break-all;
  padding-bottom: 20rpx;
  display: flex;
}

.aui-flex-box h3 em {
  background: #5293d5;
  font-size: 22rpx;
  font-style: normal;
  color: #fff;
  border-radius: 48rpx;
  padding: 5rpx 20rpx;
}

.aui-flex-box-two .aui-flex {
  padding: 0;
}

.aui-flex-bor-bom {
  border-bottom: 1px dashed #ddd;
  margin-bottom: 3px;
}

.aui-flex-box-two {
  overflow: hidden;
  position: relative;
  box-shadow: 1px 3px 13px #e4e4e4;
  height: 100px;
  padding: 10px;
  border-bottom: 1px solid #ececec;
  border-top: 1px solid #ececec;
  border-right: 1px solid #ececec;
}

.aui-icon-circle {
  background-image: url("https://dev-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/icon/Common/icon-circle.png");
  background-size: 10px;
  width: 20px;
  height: 170px;
  position: absolute;
  left: -5px;
  top: 0;
  background-repeat: repeat-y;
}

.aui-left-change p {
  font-size: 12px;
}

.aui-btn-use {
  background: none;
  border: 2rpx solid #ef8b97;
  color: #ef8b97;
  font-size: 0.7rem;
  border-radius: 40rpx;
  padding: 2rpx 10rpx;
  margin-bottom: 10rpx;
}

.aui-flex-box-flow {
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  padding-bottom: 0;
}

.tab-item {
  padding-bottom: 10px;
}

.tab-item .aui-flex {
  padding-bottom: 0;
}

.tab-item-list-green .aui-left-change {
  background-image: -webkit-gradient(linear, left top, right top, from(#54dedf), to(#30d0a6));
  background-image: -webkit-linear-gradient(left, #54dedf, #30d0a6);
  background-image: -moz-linear-gradient(left, #54dedf, #30d0a6);
  background-image: linear-gradient(to right, #54dedf, #30d0a6);
  background-color: #30d0a6;
}

.tab-item-list-green .aui-flex-box h3 em {
  background: #30d0a6;
}

.tab-item-list-green .aui-btn-use {
  border-color: #30d0a6;
  color: #30d0a6;
}

.fa-angle-right {
  background-image: url('https://dev-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/icon/Common/drop-down-icon.png');
}

.tab-item-list-default .aui-left-change {
  background: #c3c3c3;
}

.tab-item-list-default .aui-flex-box h3 em {
  background: #c3c3c3;
}

.aui-icon-used img {
  width: 100%;
  height: 80rpx;
  display: block;
  border: none;
}

.font-baseline {
  display: flex;
  align-items: baseline;
}

.tab-item-list-pink .aui-left-change {
  background-image: -webkit-gradient(linear, left top, right top, from(#ef8b97), to(#ef8b97));
  background-image: -webkit-linear-gradient(left, #ef8b97, #ef8b97);
  background-image: -moz-linear-gradient(left, #ef8b97, #ef8b97);
  background-image: linear-gradient(to right, #ef8b97, #ef8b97);
  background-color: #ef8b97;
}

.tab-item-list-pink .aui-flex-box h3 em {
  background: #ef8b97;
}

.tab-item-list-pink .aui-btn-use {
  border-color: #ef8b97;
  color: #ef8b97;
}

.aui-flex-show {
  padding-top: 8rpx !important;
  color: #bbbbbb;
}

.checkmark {
  position: absolute;
  top: 10rpx;
  right: 5rpx;
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  background-color: #19be6b; /* 蓝色 */
}

.checkmark::before {
  content: '\2714'; /* ✔的Unicode编码 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  color: #fff; /* 白色 */
}
</style>
